<template>
  <view class="content">
    <view class="msg">
      <view class="title1">{{ commodityDetail.commodityName }}</view>
      <view class="title2"
        >有效期至：{{ commodityDetail.expiringDate | parseTime }}</view
      >
    </view>
    <view class="codeCard">
      <view class="top">
        <view style="margin-bottom: 10rpx">券码</view>
        <view>{{ commodityDetail.serialNum }}</view>
      </view>
      <view class="bottom">
        <image
          class="codeImg"
          :src="commodityDetail.imgUrl" />
      </view>
    </view>
  </view>
</template>

<script>
  import { getQrCode, getTokenDetail } from '@/apis/my'
  import { parseTime1 } from '@/utils/index'
  export default {
    data() {
      return {
        id: '',
        commodityDetail: {
          commodityName: '',
          expiringDate: '',
          serialNum: '',
          imgUrl: ''
        }
      }
    },
    filters: {
      parseTime(time) {
        return parseTime1(time)
      }
    },
    onLoad(option) {
      this.id = option.id
      this.getQrCode()
      this.getTokenDetail()
    },
    methods: {
      async getQrCode() {
        const res = await getQrCode({ id: this.id })
        console.log(res)
        if (res.code === 200) {
          this.commodityDetail.imgUrl = res.data.qrCode
            ? 'data:image/png;base64,' + res.data.qrCode
            : ''
          // const data = rsaDecrypt(res.data.qrCode)
          console.log('二维码', res.data)
        } else {
          uni.utils.toast(res.message)
        }
      },
      async getTokenDetail() {
        const res = await getTokenDetail({ id: this.id })
        console.log(res)
        if (res.code === 200) {
          const data = res.data
          console.log('详情', data)
          this.commodityDetail.commodityName = data.commodityName
            ? data.commodityName
            : ''
          this.commodityDetail.expiringDate = data.expiringDate
            ? data.expiringDate
            : ''
          this.commodityDetail.serialNum = data.exchangeId
            ? data.exchangeId
            : ''
        } else {
          uni.utils.toast(res.message)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    background-color: #f6f6f6;
    height: 100vh;
    .msg {
      height: 122rpx;
      text-align: center;
      padding-top: 20rpx;
      .title1 {
        font-size: 32rpx;
        font-weight: bold;
        color: #1a1a1a;
        margin-bottom: 10rpx;
      }
      .title2 {
        font-size: 24rpx;
        font-weight: 500;
        color: #666666;
      }
    }
    .codeCard {
      // width: 710rpx;
      height: 484rpx;
      background: #ffffff;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      margin: 0 20rpx;
      .top {
        font-size: 28rpx;
        font-weight: bold;
        color: #1a1a1a;
        padding: 20rpx;
        border-bottom: 2rpx dashed #eee;
      }
      .bottom {
        text-align: center;
        margin: 0 auto;
        .codeImg {
          width: 280rpx;
          height: 280rpx;
        }
      }
    }
  }
</style>
